{%extends "admin/base.html" %}

{%block main%}
<div class="row">
    <div class="col-12">
        <form class="form-horizontal">
            <div class="card">
                <div class="card-header d-flex p-0">
                    <h3 class="card-title p-3">管理平台界面 个性设置</h3>
                </div>
                <div class="card-body">
                    <div class="tab-content">
                        <div class="tab-pane active">
                            <div class="form-group row">
                                <label for="main_view" class="col-sm-2 col-form-label">主体显示模式</label>
                                <div class="col-sm-2">
                                    <div class="icheck-primary d-inline">
                                        <input type="radio" id="light_view" name="main_view" value="light" {%if info.main_view !='night' %} checked{%endif%}>
                                        <label for="light_view">白天</label>
                                    </div>
                                    <div class="icheck-primary d-inline">
                                        <input type="radio" id="night_view" name="main_view" value="night" {%if info.main_view=='night' %} checked{%endif%}>
                                        <label for="night_view">黑夜</label>
                                    </div>
                                </div>
                                <label for="sidebar_view" class="col-sm-2 col-form-label">侧边菜单显示模式</label>
                                <div class="col-sm-2">
                                    <div class="icheck-primary d-inline">
                                        <input type="radio" id="sidebar_light_view" name="sidebar_view" value="light" {%if info.sidebar_view=='light' %} checked{%endif%}>
                                        <label for="sidebar_light_view">白天</label>
                                    </div>
                                    <div class="icheck-primary d-inline">
                                        <input type="radio" id="sidebar_night_view" name="sidebar_view" value="night" {%if info.sidebar_view !='light' %} checked{%endif%}>
                                        <label for="sidebar_night_view">黑夜</label>
                                    </div>
                                </div>
                                <label for="top_view" class="col-sm-2 col-form-label">顶部导航显示模式</label>
                                <div class="col-sm-2">
                                    <div class="icheck-primary d-inline">
                                        <input type="radio" id="top_light_view" name="top_view" value="light" {%if info.top_view!='night' %} checked{%endif%}>
                                        <label for="top_light_view">白天</label>
                                    </div>
                                    <div class="icheck-primary d-inline">
                                        <input type="radio" id="top_night_view" name="top_view" value="night" {%if info.top_view=='night' %} checked{%endif%}>
                                        <label for="top_night_view">黑夜</label>
                                    </div>
                                </div>
                            </div>
                            <hr />
                            <div class="form-group row">
                                <label for="small_text_body" class="col-sm-2 col-form-label">更小字号显示</label>
                                <div class="col-sm-2">
                                    <input type="checkbox" id="small_text_body" name="small_text_body" data-bootstrap-switch{%if info.small_text_body=='on' %} checked{%endif%}>
                                </div>
                                <label for="small_text_top" class="col-sm-1 col-form-label">顶部导航</label>
                                <div class="col-sm-1">
                                    <input type="checkbox" id="small_text_top" name="small_text_top" data-bootstrap-switch{%if info.small_text_top=='on' %} checked{%endif%}>
                                </div>
                                <label for="small_text_sidebar" class="col-sm-1 col-form-label">侧边菜单</label>
                                <div class="col-sm-1">
                                    <input type="checkbox" id="small_text_sidebar" name="small_text_sidebar" data-bootstrap-switch{%if info.small_text_sidebar=='on' %} checked{%endif%}>
                                </div>
                                <label for="small_text_bottom" class="col-sm-1 col-form-label">底部版权</label>
                                <div class="col-sm-1">
                                    <input type="checkbox" id="small_text_bottom" name="small_text_bottom" data-bootstrap-switch{%if info.small_text_bottom=='on' %} checked{%endif%}>
                                </div>
                            </div>
                            <hr />
                            <div class="form-group row">
                                <label for="sidebar_fixed" class="col-sm-2 col-form-label">侧边菜单固定</label>
                                <div class="col-sm-2">
                                    <input type="checkbox" id="sidebar_fixed" name="sidebar_fixed" data-bootstrap-switch{%if info.sidebar_fixed=='on' %} checked{%endif%}>
                                </div>
                                <label for="sidebar_compact" class="col-sm-2 col-form-label">侧边菜单压缩</label>
                                <div class="col-sm-2">
                                    <input type="checkbox" id="sidebar_compact" name="sidebar_compact" data-bootstrap-switch{%if info.sidebar_compact=='on' %} checked{%endif%}>
                                </div>
                                <label for="sidebar_indent" class="col-sm-2 col-form-label">侧边菜单缩进</label>
                                <div class="col-sm-2">
                                    <input type="checkbox" id="sidebar_indent" name="sidebar_indent" data-bootstrap-switch{%if info.sidebar_indent=='on' %} checked{%endif%}>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="sidebar_mode" class="col-sm-2 col-form-label">侧边菜单显示方式</label>
                                <div class="col-sm-4">
                                    <div class="icheck-primary d-inline">
                                        <input type="radio" id="gerneral_view" name="sidebar_mode" value="gerneral" {%if info.sidebar_mode == '' or info.sidebar_mode=='gerneral' %} checked{%endif%}>
                                        <label for="gerneral_view">正常模式</label>
                                    </div>
                                    <div class="icheck-primary d-inline">
                                        <input type="radio" id="flat_view" name="sidebar_mode" value="flat" {%if info.sidebar_mode=='flat' %} checked{%endif%}>
                                        <label for="flat_view">平面模式</label>
                                    </div>
                                    <div class="icheck-primary d-inline">
                                        <input type="radio" id="legacy_view" name="sidebar_mode" value="legacy" {%if info.sidebar_mode=='legacy' %} checked{%endif%}>
                                        <label for="legacy_view">传统模式</label>
                                    </div>
                                </div>
                                <label for="sidebar_collapse" class="col-sm-2 col-form-label">侧边菜单折叠</label>
                                <div class="col-sm-4">
                                    <input type="checkbox" id="sidebar_collapse" name="sidebar_collapse" data-bootstrap-switch{%if info.sidebar_collapse=='on' %} checked{%endif%}>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="top_fixed" class="col-sm-2 col-form-label">顶部导航固定</label>
                                <div class="col-sm-4">
                                    <input type="checkbox" id="top_fixed" name="top_fixed" data-bootstrap-switch{%if info.top_fixed=='on' %} checked{%endif%}>
                                </div>
                                <label for="bottom_fixed" class="col-sm-2 col-form-label">底部版权固定</label>
                                <div class="col-sm-4">
                                    <input type="checkbox" id="bottom_fixed" name="bottom_fixed" data-bootstrap-switch{%if info.bottom_fixed=='on' %} checked{%endif%}>
                                </div>
                            </div>
                            <hr />
                            <div class="form-group row">
                                <label for="sidebar_color" class="col-sm-2 col-form-label">侧边菜单选中颜色</label>
                                <div class="col-sm-4">
                                    <select class="form-control" id="sidebar_color" name="sidebar_color" style="width: 100%;">
                                        <option value="primary" {%if info.sidebar_color=='primary' %} selected="selected" {%endif%}>蓝色</option>
                                        <option value="info" {%if info.sidebar_color=='info' %} selected="selected" {%endif%}>蓝色</option>
                                        <option value="lightblue" {%if info.sidebar_color=='lightblue' %} selected="selected" {%endif%}>淡蓝</option>
                                        <option value="indigo" {%if info.sidebar_color=='indigo' %} selected="selected" {%endif%}>靛蓝</option>
                                        <option value="purple" {%if info.sidebar_color=='purple' %} selected="selected" {%endif%}>紫色</option>
                                        <option value="navy" {%if info.sidebar_color=='navy' %} selected="selected" {%endif%}>海军色</option>
                                        <option value="maroon" {%if info.sidebar_color=='maroon' %} selected="selected" {%endif%}>紫褐色</option>
                                        <option value="fuchsia" {%if info.sidebar_color=='fuchsia' %} selected="selected" {%endif%}>紫红色</option>
                                        <option value="danger" {%if info.sidebar_color=='danger' %} selected="selected" {%endif%}>红色</option>
                                        <option value="pink" {%if info.sidebar_color=='pink' %} selected="selected" {%endif%}>粉红色</option>
                                        <option value="orange" {%if info.sidebar_color=='orange' %} selected="selected" {%endif%}>橙色</option>
                                        <option value="warning" {%if info.sidebar_color=='warning' %} selected="selected" {%endif%}>黄色</option>
                                        <option value="success" {%if info.sidebar_color=='success' %} selected="selected" {%endif%}>绿色</option>
                                        <option value="lime" {%if info.sidebar_color=='lime' %} selected="selected" {%endif%}>石灰色</option>
                                        <option value="teal" {%if info.sidebar_color=='teal' %} selected="selected" {%endif%}>青色</option>
                                        <option value="olive" {%if info.sidebar_color=='olive' %} selected="selected" {%endif%}>油橄榄色</option>
                                        <option value="dark" {%if info.sidebar_color=='dark' %} selected="selected" {%endif%}>黑色</option>
                                        <option value="secondary" {%if info.sidebar_color=='secondary' %} selected="selected" {%endif%}>灰色</option>
                                        <option value="light" {%if info.sidebar_color=='light' %} selected="selected" {%endif%}>白色</option>
                                    </select>
                                </div>
                                <label for="top_color" class="col-sm-2 col-form-label">顶部导航背景颜色</label>
                                <div class="col-sm-4">
                                    <select class="form-control" id="top_color" name="top_color" style="width: 100%;">
                                        <option value="white" {%if info.top_color=='white' %} selected="selected" {%endif%}>白色</option>
                                        <option value="gray" {%if info.top_color=='gray' %} selected="selected" {%endif%}>灰色</option>
                                        <option value="red" {%if info.top_color=='red' %} selected="selected" {%endif%}>红色</option>
                                        <option value="maroon" {%if info.top_color=='maroon' %} selected="selected" {%endif%}>紫褐色</option>
                                        <option value="pink" {%if info.top_color=='pink' %} selected="selected" {%endif%}>粉红色</option>
                                        <option value="fuchsia" {%if info.top_color=='fuchsia' %} selected="selected" {%endif%}>紫红色</option>
                                        <option value="orange" {%if info.top_color=='orange' %} selected="selected" {%endif%}>橙色</option>
                                        <option value="yellow" {%if info.top_color=='yellow' %} selected="selected" {%endif%}>黄色</option>
                                        <option value="green" {%if info.top_color=='green' %} selected="selected" {%endif%}>绿色</option>
                                        <option value="lime" {%if info.top_color=='lime' %} selected="selected" {%endif%}>石灰色</option>
                                        <option value="cyan" {%if info.top_color=='cyan' %} selected="selected" {%endif%}>青色</option>
                                        <option value="teal" {%if info.top_color=='teal' %} selected="selected" {%endif%}>青色</option>
                                        <option value="olive" {%if info.top_color=='olive' %} selected="selected" {%endif%}>油橄榄色</option>
                                        <option value="blue" {%if info.top_color=='blue' %} selected="selected" {%endif%}>蓝色</option>
                                        <option value="lightblue" {%if info.top_color=='lightblue' %} selected="selected" {%endif%}>淡蓝</option>
                                        <option value="info" {%if info.top_color=='info' %} selected="selected" {%endif%}>蓝色</option>
                                        <option value="indigo" {%if info.top_color=='indigo' %} selected="selected" {%endif%}>靛蓝</option>
                                        <option value="purple" {%if info.top_color=='purple' %} selected="selected" {%endif%}>紫色</option>
                                        <option value="navy" {%if info.top_color=='navy' %} selected="selected" {%endif%}>海军色</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="main_color" class="col-sm-2 col-form-label">主体内容强调颜色</label>
                                <div class="col-sm-4">
                                    <select class="form-control" id="main_color" name="main_color" style="width: 100%;">
                                        <option value="primary" {%if info.main_color=='primary' %} selected="selected" {%endif%}>蓝色</option>
                                        <option value="info" {%if info.main_color=='info' %} selected="selected" {%endif%}>蓝色</option>
                                        <option value="lightblue" {%if info.main_color=='lightblue' %} selected="selected" {%endif%}>淡蓝</option>
                                        <option value="indigo" {%if info.main_color=='indigo' %} selected="selected" {%endif%}>靛蓝</option>
                                        <option value="purple" {%if info.main_color=='purple' %} selected="selected" {%endif%}>紫色</option>
                                        <option value="dark" {%if info.main_color=='dark' %} selected="selected" {%endif%}>黑色</option>
                                        <option value="gray" {%if info.main_color=='gray' %} selected="selected" {%endif%}>灰色</option>
                                        <option value="light" {%if info.main_color=='light' %} selected="selected" {%endif%}>白色</option>
                                        <option value="danger" {%if info.main_color=='danger' %} selected="selected" {%endif%}>红色</option>
                                        <option value="fuchsia" {%if info.main_color=='fuchsia' %} selected="selected" {%endif%}>紫红色</option>
                                        <option value="maroon" {%if info.main_color=='maroon' %} selected="selected" {%endif%}>紫褐色</option>
                                        <option value="pink" {%if info.main_color=='pink' %} selected="selected" {%endif%}>粉红色</option>
                                        <option value="orange" {%if info.main_color=='orange' %} selected="selected" {%endif%}>橙色</option>
                                        <option value="warning" {%if info.main_color=='warning' %} selected="selected" {%endif%}>黄色</option>
                                        <option value="success" {%if info.main_color=='success' %} selected="selected" {%endif%}>绿色</option>
                                        <option value="lime" {%if info.main_color=='lime' %} selected="selected" {%endif%}>石灰色</option>
                                        <option value="cyan" {%if info.main_color=='cyan' %} selected="selected" {%endif%}>青色</option>
                                        <option value="navy" {%if info.main_color=='navy' %} selected="selected" {%endif%}>海军色</option>
                                        <option value="olive" {%if info.main_color=='olive' %} selected="selected" {%endif%}>油橄榄色</option>
                                        <option value="teal" {%if info.main_color=='teal' %} selected="selected" {%endif%}>青色</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <button type="submit" class="btn btn-info">保存</button>
                </div>
            </div>
        </form>
    </div>
</div>
{%endblock%}

{%block js%}
<script>
    $(function () {
        $("input[data-bootstrap-switch]").each(function () {
            $(this).bootstrapSwitch('state', $(this).prop('checked'));
        });

        $('#sidebar_color').select2({ templateResult: colorFormatState });
        $('#top_color').select2({ templateResult: colorFormatState });
        $('#main_color').select2({ templateResult: colorFormatState });

        $('form').submit(function (e) {
            e.preventDefault();
            $('form').find('button[type="submit"]').addClass('disabled');
            $.post('{{ url("") }}', $('form').serialize(), function (res) {
                _msg = ('msg' in res) ? res.msg : '未知错误';
                if (!('code' in res) || res.code != 0) {
                    toastr.error(_msg);
                } else {
                    toastr.success('保存成功');

                    setTimeout(() => {
                        window.location.reload();
                    }, 3000);
                }
                $('form').find('button[type="submit"]').removeClass('disabled');
            });
        });
    });

    function colorFormatState(state) {
        if (!state.id) {
            return state.text;
        }
        return $('<span class="d-block bg-' + state.id + '">' + state.text + '</span>');
    }
</script>
{%endblock%}